 <template>
 	<div id="outDiv" :class="isFocus ? 'getFocus' : ''">
 		<group class="inputGroup" :title="groupTitle">
 			<div class="xInput">
 				<div class="flex-h">
 					<toast :v-model="errMsg == '' ? false :showPositionValue" type="text" :time="2000" width="50%" is-show-mask :text="errMsg">{{errMsg}}</toast>
 					<div class="flex-input">
 						<img :src="pathSrc" alt="">
 						<input v-on:focus="focusOn" v-on:blur="blurAdjust" class="flex1" :type="type==='txt'|| type==='yzm'?'text':txtType" ref="input" :placeholder="plvalue" :value="value" @input="$emit('getVal', $event.target.value)">
 						<div class="boxwes" v-if="type=='pwd'" @click="tabImg">
							<img class="imgIcon" src="~/static/images/password_icon_eye_d.png" v-if="ssr" alt="">
 							<img class="imgIcon" src="~/static/images/password_icon_eye_s.png" v-else alt="">
						</div>
 						<div v-if="type=='yzm'">
 							<button :class="['yzm',yzmtrue?'yzmactive':'']"  v-on:click="send">{{yzmMsg}}</button>
 						</div>
 					</div>
 				</div> 
 			</div>
 		</group>
 	</div>
 </template>
 
 <script>
 	import { Toast, Group } from 'vux'
 	export default {
 		props: {
 			errMsg: String,
 			pathSrc: String,
 			plvalue: String,
 			value:String,
 			showXx: Boolean,
 			type: String,
 			groupTitle: String,
			yzmtrue:{
				type:Boolean,
				default:false
			},
			yzmMsg:String
 		},
 		model: {
 			prop: 'value',
 			event: 'getVal'
 		},
 		components: {
 			Toast,
 			Group
 		},
 		data() {
 			return {
 				ssr: true,
 				txtType: 'password',
 				showPositionValue: false,
 				isFocus: false,
 			};
 		},
 		mounted: function() {
 		},
 		methods: {
 			tabImg() {
 				this.ssr = !this.ssr
 				if (this.ssr === true) {
 					this.txtType = 'password'
 				} else {
 					this.txtType = 'text'
 				}
 			},
 			clear1() {
 				this.$emit("clears")
 			},
 			blurAdjust(e) {
 			// 文本框失去焦点
 			this.isFocus = false;
 			setTimeout(() => {
 				if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
 					return
 				}
 		
 				let result = 'pc';
 				if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
 					result = 'ios'
		
 				} else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
 					result = 'android'
				
 				}
 		
 				if (result = 'ios') {

 					document.activeElement.scrollIntoViewIfNeeded(true);
 				}
 			}, 20)
 		},
 			focusOn() {
 				// 文本框获取焦点
 				this.isFocus = true;
 			},
 			send() {
 				this.$emit("sends")
 			},
 		}
 	};
 </script>
 
 
 <style scoped lang="less">
 	@errorColor: #ff210a;
 
 	.getFocus {
 		.inputGroup /deep/ .weui-cells__title {
 			color: @mainColor;
 		}
 	}
 
 	.inputGroup /deep/ .weui-cells__title {
 		color: #999;
 		font-size: 0.28rem;
 	}
 	.inputGroup /deep/ .weui-cells:before, .inputGroup /deep/ .weui-cells:after, .inputGroup .xInput {
 		border: none;
 		height: auto;
 	}
 	.inputGroup {
 		margin-bottom: 0.3rem;
 	}
 	.inputGroup /deep/ .flex-h {
 		height: auto;
 		flex-direction: column !important;
 		justify-content: flex-start !important;
 		.yzm {
 			display: inline-block;
 			font-size: 0.3rem;
 			color: #BBB;
 			width: 2.8rem;
 			height: 0.88rem;
 			line-height: 0.88rem !important;
 			text-align: center;
 			background: #FAFAFA;
 			border-radius: 8px;
 			margin-left: 0.3rem;
 			border: none;
 			outline: none;
 		}
		.yzmactive{
			color: #67BD19
		}
 		.flex1 {
 			border-bottom: 2px solid #EEE;
 			height: 1rem;
 			border-radius: 0;
 			box-sizing: border-box;
 		}
 		.flex1:focus {
 			border-bottom-color: @mainColor;
 		}
 	}
 
 	.xInput {
 		width: 100%;
 		height: 1rem;
 		border-bottom: 5px solid #EEE;
 		font-size: 0.3rem;
 		padding-right: 0;
 		padding-left: 0;
 		.boxwes {
 			width: 1rem;
 			height: 0.5rem;
 			overflow: hidden;
 			text-align: right;
 			padding-top: 0.1rem;
 			box-sizing: border-box;
 			position: absolute;
 			right: 0.2rem;
 		}
 		.noShow { display: none; }
 		.toShow { display: inline-block; }
 
 		.errorSpan {
 			padding-left: 0.5rem;
 			box-sizing: border-box;
 			height: 0.4rem;
 			text-align: left;
 			width: 100%;
 
 
 			line-height: 0.4rem;
 
 			b {
 				font-size: 0.22rem;
 				color: @errorColor;
 			}
 		}
 
 		img {
 			width: 0.3rem;
 			height: auto;
 		}
 
 		input {
 			width: 100%;
 			padding-left: 0.2rem;
 			box-sizing: border-box;
 			height: 0.56rem;
 			outline: none;
 			border: none;
 			line-height: 0.56rem;
 			font-size: 0.3rem;
 			color: #222;
 		}
 	}
 
 	.xColor {
 		border-bottom: 2px solid @errorColor  !important;
 	}
 	.flex-input {
 		width: 100%;
 		display: flex;
 		justify-content: flex-start;
 		flex-direction: row;
 		align-items: center;
 		position: relative;
 	}
 	.yzm {
 		font-size: 0.26rem;
 		line-height: 0.6rem;
 	}
 	.send {
 		color: #64ab33 !important;
 	}
 </style>
 